<template>
	<view class="box">
		<scroll-view :scroll-y="true" class="scrollContent" @scrolltolower="scrolltolower">
			<Modleremark :remarkarr="list" :flag="true"></Modleremark>
		</scroll-view>
	</view>
</template>

<script>
	import Modleremark from "../../components/Modleremark/index.vue"
	import {
		getcommentlist
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				list: [],
				page: 0,
				limit: 20,
				flag: false,
				id: 0
			}
		},
		methods: {
			public(flag) {
				if (flag) {
					this.page = 0
					this.flag = false
					this.list = []
				}
				if (this.flag) {
					return uni.showToast({
						title: "没有更多了",
						icon: "none",
						duration: 1500
					})
				}
				this.page++
				let data = {
					comment_id: this.id,
					page: this.page,
					limit: this.limit
				}
				getcommentlist(data).then(res => {
					this.list = this.list.concat(res.data)
					if (res.data.length < this.limit) {
						this.flag = true
					}
				})
			},
			scrolltolower() {
				this.public();
			},
		},
		components: {
			Modleremark
		},
		onLoad(v) {
			this.id = v.id
		},
		onShow() {
			this.public()
		}
	}
</script>

<style scoped lang="scss">
	.box {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #FFFFFF;
		overflow: scroll;
	}

	.scrollContent {
		height: calc(100vh - 750rpx - 140rpx - 108rpx - -951rpx);
	}
</style>
